<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/webpage/include/taglib.jsp" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>植百汇采购单</title>
    <script>
        var ctx = '${ctx}';
    </script>
    <script type="text/javascript" src="${ctxStatic}/plugin/layui2.0/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="${ctxStatic}/plugin/layui2.0/layui.js"></script>
    <link rel="stylesheet" href="${ctxStatic}/plugin/layui2.0/css/layui.css" media="all">
    <script src="${ctxStatic}/common/js/sku.js"></script>
    <script src="${ctxStatic}/common/js/jeeplus.js"></script>


</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>采购单录入</legend>
</fieldset>
<form class="layui-form" action="">
    <!--供应商信息start-->
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">供应商</label>
            <div class="layui-input-inline">
                <select id="supplierId" lay-filter="supplierId" name="supplierId" lay-verify="required" lay-search="">
                    <option value="">直接选择或搜索选择</option>
                    <c:forEach items="${supplierList}" var="i">
                        <option value="${i.id}">${i.supplierName}</option>
                    </c:forEach>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">供应商合同</label>
            <div class="layui-input-inline">
                <select name="contractId" id="contractId" lay-verify="required" lay-search="">
                    <option value="">直接选择或搜索选择</option>
                </select>
                <div id="iv" name="iv" style="display:none">
                    <c:forEach items="${contractList}" var="i">
                        <input class="a" type="hidden" id="${i.supplierId}" value="${i.id}"
                               name="${i.contractName}"></input>
                    </c:forEach>
                </div>
            </div>
        </div>
    </div>
    <!--供应商信息end-->

    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">备注</label>
        <div class="layui-input-block">
            <textarea id="remarks" name="remarks" placeholder="请输入内容" class="layui-textarea"></textarea>
        </div>
    </div>

    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>采购单明细<div onclick="sub()" class="layui-btn layui-btn-normal">选择sku</div></legend>
    </fieldset>


    <div class="layui-form-item" id="item" style="display:none">
        <div class="layui-inline">
            <label class="layui-form-label">SKU</label>
            <div style="width:400px;" class="layui-input-inline">
                <input  sku=""  readonly value=""  type="text" id="sku" name="sku" autocomplete="off"
                        placeholder="" class="layui-input"/>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">采购单价</label>
            <div class="layui-input-block">
                <input type="text" id="price" onkeyup="value=value.replace(/[^\d\.]/g,'')"
                       onblur="value=value.replace(/[^\d\.]/g,'')" name="price" autocomplete="off"
                       placeholder="请输入采购单价" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">采购数量</label>
            <div class="layui-input-block">
                <input type="text" onkeyup='this.value=this.value.replace(/\D/g,&apos;&apos;)' name="num" id="num"
                       autocomplete="off" placeholder="请输入采购数量" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <div class="layui-input-block">
                <div onclick="removeItem(this)" class="layui-btn  layui-btn-danger ">删除</div>
            </div>
        </div>
    </div>


    <!--动态添加数据start-->
    <div id="purchaseOrder">

    </div>
    <!--动态添加数据end-->
    <hr/>
    <!--保存按钮start-->
    <div class="layui-form-item">
        <div class="layui-inline">
            <div class="layui-input-block">
                <div onclick="subForm()" class="layui-btn">保存</div>
                <div onclick="reBack()" class="layui-btn layui-btn-primary">返回</div>
            </div>
        </div>
    </div>
    <!--保存按钮end-->
</form>

</body>

<!-- layUI 加载form属性 -->
<script>
    layui.use(['form', 'layedit', 'laydate'], function () {
        var form = layui.form
            , layer = layui.layer
            , layedit = layui.layedit
            , laydate = layui.laydate;

        <!--供应商和供应商合同关联-->
        form.on('select(supplierId)', function (data) {
            var ins = $("#iv").find(".a");
            $("#contractId").empty();
            var html = ""
            for (var i = 0; i < ins.length; i++) {
                if ($(ins[i]).attr("id") == data.value) {
                    var name = $(ins[i]).attr("name");
                    var id = $(ins[i]).attr("value");
                    html += "<option value='" + id + "'>" + name + "</option>";
                }
            }
            $("#contractId").append(html);
            form.render();
        });

    });

    //删除
    function removeItem(obj) {
        $(obj).parent().parent().parent().remove();
    }
</script>
<script>
    <!--提交代码-->
    function subForm() {
        var json = new Object();
        json.deliveryDate = $("#deliveryDate").val();//交货日期
        json.contractId = $("#contractId").val();//供应商合同
        json.supplierId = $("#supplierId").val();//供应商
        json.isTax = $("#isTax").val();//供应商合同
        json.remarks = $("#remarks").val();//备注
        json.invoiceType = $("#invoiceType").val();//付款方式

        //采购明细单
        var items = $("#purchaseOrder").find(".layui-form-item");

        if(null==items || ""==items || items.length==0){
            layer.alert('请添加sku!', {
                icon: 2,
                title: "提示"
            });
            return;
        }

        var orderItems = new Array();
        var orderItem;
        for (var i = 0; i < items.length; i++) {
            orderItem = new Object();
            orderItem.skuId = $(items[i]).find("#sku").attr("sku");
            orderItem.price = $(items[i]).find("#price").val();
            orderItem.num = $(items[i]).find("#num").val();

            if (orderItem.skuId == "" || orderItem.price == "" || orderItem.num == "") {
                layer.alert('有空数据请检查!', {
                    icon: 2,
                    title: "提示"
                });
                return;
            }

            orderItems.push(orderItem);
        }
        json.items = orderItems;
        var fromData = new FormData();

        fromData.append("jsons", JSON.stringify(json));
        //提交数据
        $.ajax({
            url: "${ctx}/purchase/purchaseOrder/savePurchaseOrder",
            type: "post",
            data: fromData,
            contentType: false, // 注意这里应设为false
            processData: false,
            beforeSend: function () {
                index = layer.load(1, {
                    shade: [0.5, '#fff'] //0.1透明度的白色背景
                });
            },
            complete: function () {
                layer.close(index);
            },
            success: function (data) {
                if (data.message == "1") {
                    layer.alert('保存成功!', {
                        icon: 1,
                        title: "提示"
                    });
                    layer.close(index);
                    reBack();
                }
            },
            error: function (e) {
                layer.alert('保存失败!', {
                    icon: 2,
                    title: "提示"
                });

            }
        });


    }
    <!--返回方法-->
    function reBack() {
        window.location.href = "${ctx}/purchase/purchaseOrder/list";
    }



</script>

<script>
    //弹窗选择sku
    function sub() {
        layer.open({
            type: 2,
            title: 'sku选择',
            maxmin: true, //开启最大化最小化按钮*!/
            area: ['1200px', '600px'],
            content:ctx+"/sku/sku/pop",
            btn:['确定'],
            yes : function(index,layero) {

                var rows=$(layero).find("iframe")[0].contentWindow.$("#skuTable").bootstrapTable('getSelections');

                if(null!=rows){
                    for(var i=0;i<rows.length;i++){
                        var skuName=rows[i].productName+"：" + "["+jp.getDictLabel(${fns:toJson(fns:getDictList('sc_category_a'))}, rows[i].categoryA, "-")+"]" +"—" +"["+jp.getDictLabel(${fns:toJson(fns:getDictList('sc_category_b'))}, rows[i].categoryB, "-")+"]" +"—" +"["+jp.getDictLabel(${fns:toJson(fns:getDictList('sc_category_c'))}, rows[i].categoryC, "-")+"]";
                        var res=checkSkuName(skuName);//校验是否重复
                        if(res==0){
                            addItem(skuName,rows[i].id);
                        }

                    }
                }

                /*  var i=checkSkuName(skuName);
                  if(i==0){
                      $(obj).val(skuName);
                      $(obj).attr("sku",skuId);
                      layer.close(index);
                  }*/
            }
        });
    }
    //校验sku是否重复
    function checkSkuName(skuName) {
        var k=0;
        var skuNames=$("#purchaseOrder").find("input[name='sku']");
        for(var i=0;i<skuNames.length;i++){
            if(skuName==$(skuNames[i]).val()){
                layer.alert('已存在相同的sku!', {
                    icon: 3,
                    title: "提示"
                });
                k=1;
            }
        }
        return k;
    }

    //添加
    function addItem(skuName,skuId) {
        var sku=$("#item").find("input[name='sku']");
        $(sku).attr("value",skuName);
        $(sku).attr("sku",skuId);
        var html="<div class=\"layui-form-item\" >"+$("#item").html()+"</div>";
        $("#purchaseOrder").append(html);
    }
</script>
</html>
